<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="zh">

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="Keywords" content="简单的HTML页面" />
	<meta name="Description" content="这是一个简单的HTML页面" />
	<title>简单的HTML页面</title>
	<script type="text/javascript" src="http://yui.yahooapis.com/3.0.0/build/yui/yui-min.js"></script>
<style>
.t-corner-all {
-moz-border-radius:3px;
-khtml-border-radius: 3px;
-webkit-border-radius: 3px;
}
.t-calendar {background-color:white;position:absolute;width:187px;height:auto;padding:2px 2px 2px 2px;margin:1px;display:block;border:1px solid #DDDDDD;font-size:10px;font-family:Helvetica,Arial,sans-serif;}
.t-calendar .hd {position:relative;line-height:20px;text-align:center;width:100%;height:20px;padding:2px 0px;background:#DDDDDD url(ui-hd-bg.png) repeat-x scroll 50% 50%}
.t-calendar .hd a {cursor:pointer;width:19px;height:18px;background:url('ui-fk.png') no-repeat;position:absolute;}
.t-calendar .hd b.hdtxt {color:#444;font-weight:bold;font-size:11px;}
.t-calendar .hd a:hover{background:url('ui-fk-hover.png') no-repeat;background-color:dodgerblue;border:1px solid dodgerblue;}
.t-calendar .hd a.prev {top:2px;left:2px;background-position:-78px -191px;}
.t-calendar .hd a.next {top:2px;right:2px;background-position:-47px -191px;}
.t-calendar .hd a.prev:hover {_background-position:-78px -191px;}
.t-calendar .hd a.next:hover {_background-position:-47px -191px;}

.t-calendar .bd {margin-top:7px;width:187px;}
.t-calendar .bd span {width:24px;height:16px;display:inline-block;text-align:right;margin:1px 0 1px 1px ;line-height:18px;padding-right:1px;text-decoration:none;}
.t-calendar .ft {margin-top:4px;margin-left:3px;width:187px;}
.t-calendar .ft a {width:22px;height:17px;display:inline-block;text-align:right;border:1px solid #ccc;margin:1px 0 1px 1px ;line-height:18px;padding-right:1px;text-decoration:none;color:#0073ea;background:#F6F6F6;}
.t-calendar .ft a:hover {background-color:#0073ea;border:1px solid #1C94C4;color:white;}
.t-calendar .ft a.today{background-color:dodgerblue;border:1px solid #1C94C4;color:white;}
.t-calendar .ft a.selected {background-color:white;border:1px solid #dddddd;color:#FF0084;}
.t-calendar .ft a.null {color:white;background:white;border:white 1px solid;cursor:default;}
.t-calendar .ft a.null:hover {_color:white;_background:white;_border:white 1px solid;_cursor:default;}


</style>
</head>
<body  class="yui-skin-sam">
<h1>基于YUI3的简单日历组件</h1>
<p>页面中生成了一个日历控件，以他所绑定元素的左下角为起点位置，点击input显示日历</p>
<input type=text value="click here" style="margin-top:100px;margin-left:200px;" id="c"></input>
<hr />
<h3>API</h3>
<code><pre>
new T.tbwidget.calendar(node,callback,options);
node:		要触发事件的node对象
callback:	选择日期的回调函数，参数为选择的日期
options:	配置项
		date:当前显示的日期所在的面板，字符串(yyyy/mm/dd)or Date类型
		selectedate:当前选择的日期，字符串(yyyy/mm/dd) or Date类型
		easing:展开的动画效果，默认为Y.Easing.elasticOut
		duration:展开的速度，默认为0.9
		closeable:选择日期后是否关闭,默认为true

接口:		render(o):渲染，o为options
		hide():关闭
		show():打开
		monthAdd():显示下一月
		monthMinus():显示前一月
		init():构造函数，new的时候调用，一般用不着
		...
</pre></code>
<h3>note</h3>
<p>author:bachi@taobao.com 拔赤</p>

</body>
<script>
<!--
var c = {};
YUI({
	modules:{
		 't-calendar':{
			 fullpath:'t-calendar.js?'+Math.random(),
			 requires:['node','anim','console','dump']
		 }
	}
}).use('t-calendar',function(Y){
	new Y.Console().render();
	 c = new T.tbwidget.calendar(Y.Node.get('#c'),function(d){
		 Y.log(Y.dump(d));
		 Y.Node.get('#c').set('value',Y.dump(d));
		 c.render({selectedate:d});
	 },{
		date:'2009/11/02' 
	 });
});


/*
var TheDemo= (new Cubee()).addmojo({
	 't-calendar':{
		 fullpath:'t-calendar.js?'+Math.random(),
		 tbmojo:false,
		 requires:['node','anim','console','dump']
	 }
 }).require('*').onReady(function(){
	 c = new T.tbwidget.calendar(T.Node.get('a#c'),function(d){
		 T.log(T.dump(d));
	 });
	 
 });


TBloader.onReady(function(){
	TheDemo.start();
});
*/
//-->
</script>

</html>
